<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>输入框 / 文本域 - Layui 文档</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>;!function(){self!==parent&&(location.href="about:blank")}();</script>
  <link href="/public/layui/v/2.8.6/css/layui.css" rel="stylesheet">
  <link href="/public/static/dist/docs/2.8/css/global.css?v=16" rel="stylesheet">
  <script>
  (function(){if(window.JSON&&window.JSON.parse){var c=document.getElementsByTagName("head"),a=document.createElement("link");try{var b=JSON.parse(localStorage.layui)}catch(d){b={}}"dark"===b.themeMode&&(a.href="//res.sentcss.com/static/dist/docs/2.8/css/layui-theme-dark.css?v=16",a.rel="stylesheet",a.id="layuicss-theme-dark",c[0].appendChild(a))}})();
  </script>
</head>
<body>
<div class="layui-header ws-header ws-bg-light">
  <div class="layui-container">
    <div class="ws-logo">
      <a class="logo" href="../../../index.html">
        <img src="/public/static/images/layui/logo.png" alt="layui">
      </a>
    </div>
    <div class="ws-header-assist">
      <div class="layui-form layui-hide-xs ws-search" lay-filter="LAY-ws-header-component"></div>
      <div class="layui-hide-xs ws-notice"></div>
    </div>
    
    <div class="ws-header-menu">
      <ul class="layui-nav layui-bg-gray ws-bg-light" id="LAY_NAV_TOP">
        <li class="layui-nav-item" data-dir="docs">
          <a href="../index.html">组件</a> 
        </li>
        <li class="layui-nav-item" data-dir="notes">
          <a href="../../../notes/index.html">笔记</a> 
        </li>
        <li class="layui-nav-item layui-hide-xs">
          <a href="https://gitee.com/layui/layui/issues" target="_blank" rel="nofollow">社区</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">
            <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
            生态
          </a>
          <dl class="layui-nav-child layui-nav-child-r" style="margin-right: -21px;">  
            <dd class="layui-hide-sm layui-show-xs" lay-unselect>
              <a href="https://gitee.com/layui/layui/issues" target="_blank" rel="nofollow">社区</a>
              <hr>
            </dd>
            <dd lay-unselect>
              <a href="https://dev.layuion.com/extend/" target="_blank">Layui 第三方扩展组件</a>
            </dd>
            <dd lay-unselect>
              <a href="https://github.com/Sight-wcg/layui-theme-dark" target="_blank" lay-unselect>
                Layui 深色主题 <span>(社区贡献)</span>
              </a>
            </dd>
            <dd lay-unselect>
              <a href="https://gitee.com/layui/layui-vue/" target="_blank" lay-unselect>
                Layui of Vue <span>(他人实现)</span>
              </a>
            </dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">2.8.6</a>
          <dl class="layui-nav-child layui-nav-child-c">  
            <dd lay-unselect class="layui-this"><a href="../../../index.html">2.8.6</a></dd>
            <dd lay-unselect><a href="../../../2.7/index.html">2.7.6</a></dd>
          </dl>
        </li>
      </ul>
      <div class="ws-header-more">
        <i class="layui-icon layui-icon-shrink-right"></i>
      </div>
      <div class="ws-header-tool ws-bg-light">
        <div class="layui-form ws-header-theme" lay-filter="header-theme">
          <input type="checkbox" name="theme-mode" id="ID-header-theme-mode" lay-filter="header-theme-mode" lay-skin="switch">
          <div lay-checkbox>
            <i class="layui-icon layui-icon-moon"></i> | 
            <i class="layui-icon layui-icon-light"></i>
          </div>
        </div>
        <div>
          <a href="https://github.com/layui/layui" target="_blank" title="Github">
            <i class="layui-icon layui-icon-github layui-font-20"></i>
          </a>
        </div>
        <div>
          <a href="https://gitee.com/layui/layui" target="_blank" title="Gitee">
            <i class="layui-icon layui-icon-gitee layui-font-20" style="color: #C71D23;"></i>
            <!--<img src="https://gitee.com/static/images/logo-en.svg" width="21">-->
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 让 IE8/9 兼容响应式栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
 
<div class="layui-container ws-container">
  
<div class="layui-panel ws-menu">
  <ul class="layui-menu layui-menu-lg ws-docs-menu">
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">基础</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../index.html">
              <span>开始使用</span> 
              <span class="layui-font-12 layui-font-gray">Getting Started</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../base.html">
              <span>底层方法</span>
              <span class="layui-font-12 layui-font-gray">Base Function</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../modules.html">
              <span>模块系统</span>
              <span class="layui-font-12 layui-font-gray">Modules</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../versions.html">
              <span>更新日志</span>
              <span class="layui-font-12 layui-font-gray">Versions</span>
              <span class="layui-badge-dot"></span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">布局</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layout/index.html">
              <span>框体</span>
              <span class="layui-font-12 layui-font-gray">Layout</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layout/grid.html">
              <span>栅格</span>
              <span class="layui-font-12 layui-font-gray">Grid</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">通用</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../color/index.html">
              <span>颜色</span>
              <span class="layui-font-12 layui-font-gray">Color</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../button/index.html">
              <span>按钮</span>
              <span class="layui-font-12 layui-font-gray">Button</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../icon/index.html">
              <span>图标</span>
              <span class="layui-font-12 layui-font-gray">Icon</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../anim/index.html">
              <span>动画</span>
              <span class="layui-font-12 layui-font-gray">Anim</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">表单</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="index.html">
              <span>表单组件</span>
              <span class="layui-font-12 layui-font-gray">Form</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="input.html">
              <span>输入框</span>
              <span class="layui-font-12 layui-font-gray">Input / Textarea</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="select.html">
              <span>选择框</span>
              <span class="layui-font-12 layui-font-gray">Select</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="checkbox.html">
              <span>复选框</span>
              <span class="layui-font-12 layui-font-gray">Checkbox</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="radio.html">
              <span>单选框</span>
              <span class="layui-font-12 layui-font-gray">Radio</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">展示</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../table/index.html">
              <span>表格</span>
              <span class="layui-font-12 layui-font-gray">Table</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laypage/index.html">
              <span>分页</span>
              <span class="layui-font-12 layui-font-gray">Laypage</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../treeTable/index.html">
              <span>树形表格</span>
              <span class="layui-font-12 layui-font-gray">TreeTable</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../nav/index.html">
              <span>导航菜单</span>
              <span class="layui-font-12 layui-font-gray">Nav</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../menu/index.html">
              <span>基础菜单</span>
              <span class="layui-font-12 layui-font-gray">Menu</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../tab/index.html">
              <span>选项卡</span>
              <span class="layui-font-12 layui-font-gray">Tab</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../badge/index.html">
              <span>徽章</span>
              <span class="layui-font-12 layui-font-gray">Badge</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../auxiliar/index.html">
              <span>辅助</span>
              <span class="layui-font-12 layui-font-gray">Blockquote / Fieldset / hr</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../class/index.html">
              <span>公共类</span>
              <span class="layui-font-12 layui-font-gray">Class</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../panel/index.html">
              <span>面板</span>
              <span class="layui-font-12 layui-font-gray">Panel / Card / Collapse</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../progress/index.html">
              <span>进度条</span>
              <span class="layui-font-12 layui-font-gray">Progress</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../timeline/index.html">
              <span>时间线</span>
              <span class="layui-font-12 layui-font-gray">Timeline</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../fixbar/index.html">
              <span>固定条</span>
              <span class="layui-font-12 layui-font-gray">Fixbar</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../tree/index.html">
              <span>树组件</span>
              <span class="layui-font-12 layui-font-gray">Tree</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../carousel/index.html">
              <span>轮播</span>
              <span class="layui-font-12 layui-font-gray">Carousel</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../flow/index.html">
              <span>流加载</span>
              <span class="layui-font-12 layui-font-gray">Flow</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../code/index.html">
              <span>代码预览组件</span>
              <span class="layui-font-12 layui-font-gray">Code</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">交互</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layer/index.html">
              <span>弹出层</span>
              <span class="layui-font-12 layui-font-gray">Layer</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laydate/index.html">
              <span>日期与时间选择</span>
              <span class="layui-font-12 layui-font-gray">Laydate</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../upload/index.html">
              <span>上传</span>
              <span class="layui-font-12 layui-font-gray">Upload</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../dropdown/index.html">
              <span>下拉菜单</span>
              <span class="layui-font-12 layui-font-gray">Dropdown</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../colorpicker/index.html">
              <span>颜色选择器</span>
              <span class="layui-font-12 layui-font-gray">Colorpicker</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../transfer/index.html">
              <span>穿梭框</span>
              <span class="layui-font-12 layui-font-gray">Transfer</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../slider/index.html">
              <span>滑块</span>
              <span class="layui-font-12 layui-font-gray">Slider</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../rate/index.html">
              <span>评分</span>
              <span class="layui-font-12 layui-font-gray">Rate</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">其他</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laytpl/index.html">
              <span>模板引擎</span>
              <span class="layui-font-12 layui-font-gray">Laytpl</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../util/index.html">
              <span>工具模块</span>
              <span class="layui-font-12 layui-font-gray">Util</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    
  </ul>
</div>

  <div class="ws-content">
    <div class="layui-text ws-text" id="WS-text">
      <h1>输入框</h1>
<blockquote class="layui-elem-quote">
<p>输入框组件是对文本框<code>&lt;input type=&quot;text&quot;&gt;</code>和多行文本框<code>&lt;textarea&gt;</code>元素的扩展</p>
</blockquote class="layui-elem-quote">
<h2 id="text" lay-toc="">普通输入框</h2>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full'], done: function(obj){
  obj.render();
}}">
  <textarea>
<div class="layui-form">
  <input type="text" name="" placeholder="文本框" class="layui-input">
  <hr class="ws-space-16">
  &lt;textarea name="" placeholder="多行文本框" class="layui-textarea"&gt;&lt;/textarea&gt;
</div>
  </textarea>
</pre>
<h2 id="wrap" lay-toc="{hot: true}">输入框点缀 <sup>2.8+</sup></h2>
<p>输入框点缀是指给普通输入框附加其他元素来进行动静态修饰，其结构包含：<em class="layui-text-em">容器、前缀、输入框、后缀</em>。</p>
<pre><code class="layui-code">&lt;div class=&quot;layui-input-{容器类}&quot;&gt;
  &lt;div class=&quot;layui-input-{前缀类}&quot;&gt;&lt;/div&gt;
  &lt;input class=&quot;layui-input&quot; placeholder=&quot;输入框&quot;&gt;
  &lt;div class=&quot;layui-input-{后缀类}&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<ul>
<li>容器类：
<ul>
<li>前置和后置结构：<code>class=&quot;layui-input-group&quot;</code></li>
<li>前缀和后缀结构：<code>class=&quot;layui-input-wrap&quot;</code></li>
</ul>
</li>
<li>前缀类：<code>class=&quot;layui-input-prefix&quot;</code></li>
<li>后缀类：<code>class=&quot;layui-input-suffix&quot;</code></li>
<li>前缀显示分隔框：<code>class=&quot;layui-input-prefix layui-input-split&quot;</code></li>
<li>后缀显示分隔框：<code>class=&quot;layui-input-suffix layui-input-split&quot;</code></li>
</ul>
<p>通过在不同层级中设置规定的 CSS 类来实现点缀布局，再按照不同需求，在前缀和后缀中放置图标等任意内容。</p>
<h3 id="group" lay-toc="{level: 2}" class="ws-bold">前置和后置</h3>
<p>前置和后置结构是<em class="layui-text-em">输入框的自适应结构</em>，可以很灵活地控制前后置内容与输入框的宽度比例。</p>
<ul>
<li>结构：</li>
</ul>
<pre><code class="layui-code">&lt;div class=&quot;layui-input-group&quot;&gt;
  &lt;div class=&quot;layui-input-prefix&quot;&gt;前置内容&lt;/div&gt;
  &lt;input type=&quot;text&quot; class=&quot;layui-input&quot;&gt;
  &lt;div class=&quot;layui-input-suffix&quot;&gt;后缀内容&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<ul>
<li>示例：</li>
</ul>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], done: function(obj){
  obj.render();
}}">
  <textarea>
<div class="layui-form">
  <div class="layui-form-item">    
    <div class="layui-input-group">
      <div class="layui-input-split layui-input-prefix">
        身高
      </div>
      <input type="text" placeholder="带任意前置和后置内容" class="layui-input">
      <div class="layui-input-split layui-input-suffix">
        cm
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-group">
      <div class="layui-input-split layui-input-prefix">
        手机号
      </div>
      <input type="text" placeholder="带任意前置和后置内容" class="layui-input">
      <div class="layui-input-suffix">
        <button class="layui-btn layui-btn-primary">一个按钮</button>
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-group">
      <div class="layui-input-split layui-input-prefix">
        用户名
      </div>
      <input type="text" placeholder="带任意前置内容" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-group">
      <input type="text" placeholder="带任意后置内容" class="layui-input">
      <div class="layui-input-split layui-input-suffix" style="cursor: pointer;">
        <i class="layui-icon layui-icon-search"></i>
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-group">
      <div class="layui-input-prefix">
        搜索
      </div>
      <input type="text" placeholder="带任意前置和后置内容" class="layui-input">
      <div class="layui-input-split layui-input-suffix" style="cursor: pointer;">
        <i class="layui-icon layui-icon-search"></i>
      </div>
    </div>
  </div>
  <hr style="margin: 32px 0;">
  <div class="layui-form-item">
    <div class="layui-input-group">
      <div class="layui-input-prefix">
        身高
      </div>
      <input type="text" placeholder="前置和后置无分割框" class="layui-input">
      <div class="layui-input-suffix">
        cm
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-group">
      <div class="layui-input-prefix">
        昵称
      </div>
      <input type="text" placeholder="带前置且无分割框" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-group">
      <input type="text" placeholder="带后置且无分割框" class="layui-input">
      <div class="layui-input-suffix">
        <i class="layui-icon layui-icon-tips"></i> 任意后置内容
      </div>
    </div>
  </div>
</div>
<!-- import layui --> 
  </textarea>
</pre>
<h3 id="pre-suf" lay-toc="{level: 2}" class="ws-bold">前缀和后缀</h3>
<p>输入框前缀和后缀是<em class="layui-text-em">输入框的纯修饰结构</em>，前缀和后缀宽度固定且其元素不可触及，即只能触及输入框本身。</p>
<ul>
<li>结构：</li>
</ul>
<pre><code class="layui-code">&lt;div class=&quot;layui-input-wrap&quot;&gt;
  &lt;div class=&quot;layui-input-prefix&quot;&gt;前缀图标&lt;/div&gt;
  &lt;input type=&quot;text&quot; class=&quot;layui-input&quot;&gt;
  &lt;div class=&quot;layui-input-suffix&quot;&gt;后缀图标&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<ul>
<li>示例：</li>
</ul>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;',layout: ['preview', 'code'], tools: ['full'], done: function(obj){
  obj.render();
}}">
  <textarea>
<div class="layui-form">
  <div class="layui-row layui-col-space16">
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-username"></i>
        </div>
        <input type="text" placeholder="带前缀" class="layui-input">
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <input type="text" placeholder="带后缀" class="layui-input">
        <div class="layui-input-suffix">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </div>
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-date"></i>
        </div>
        <input type="text" placeholder="带前缀和后缀" class="layui-input">
        <div class="layui-input-suffix">
          <i class="layui-icon layui-icon-down"></i>
        </div>
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix layui-input-split">
          <i class="layui-icon layui-icon-password"></i>
        </div>
        <input type="password" placeholder="带前缀加分隔框" class="layui-input">
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <input type="text" placeholder="带后缀加分隔框" class="layui-input">
        <div class="layui-input-suffix layui-input-split">
          <i class="layui-icon layui-icon-down"></i>
        </div>
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix layui-input-split">
          <i class="layui-icon layui-icon-date"></i>
        </div>
        <input type="text" placeholder="带前缀和后缀加分割框" class="layui-input">
        <div class="layui-input-suffix layui-input-split">
          <i class="layui-icon layui-icon-down"></i>
        </div>
      </div>
    </div>
    <div class="layui-col-md6">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-location"></i>
        </div>
        <input type="text" placeholder="带前缀无分割框和后缀有分割框" class="layui-input">
        <div class="layui-input-suffix layui-input-split">
          <i class="layui-icon layui-icon-edit"></i>
        </div>
      </div>
    </div>
    <div class="layui-col-md6">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix layui-input-split">
          <i class="layui-icon layui-icon-location"></i>
        </div>
        <input type="text" placeholder="带前缀有分割框和后缀无分割框" class="layui-input">
        <div class="layui-input-suffix">
          <i class="layui-icon layui-icon-edit"></i>
        </div>
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-form"></i>
        </div>
        <select>
          <option value="">放置 select 元素</option>
          <option value="北京">北京</option>
          <option value="上海">上海</option>
          <option value="广州">广州</option>
          <option value="深圳">深圳</option>
        </select>
      </div>
    </div>
  </div>
</div>
<!-- import layui --> 
  </textarea>
</pre>
<p>注意「前置和后置」与「前缀和后缀」 二者使用时切勿混淆。</p>
<h2 id="affix" lay-toc="{hot: true}">动态点缀 <sup>2.8+</sup></h2>
<p>该功能允许对输入框内容进行相关动态操作。通过对输入框元素设置 <code>lay-affix</code> 属性来开启动态点缀，且输入框元素必须放置在一个具有输入框点缀结构的容器中（上文有讲解）。如：</p>
<pre><code class="layui-code">input 放在前后置容器中：
&lt;div class=&quot;layui-input-group&quot;&gt;
  &lt;input type=&quot;text&quot; lay-affix=&quot;clear&quot;&gt;
&lt;/div&gt;
 
input 放在前后缀容器中：
&lt;div class=&quot;layui-input-wrap&quot;&gt;
  &lt;input type=&quot;text&quot; lay-affix=&quot;clear&quot;&gt;
&lt;/div&gt;
</code></pre>
<p><code>lay-affix</code> 属性支持设置内置属性值和自定义值</p>
<table class="layui-table">
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>lay-affix=&quot;eye&quot;</code></td>
<td>密码框显隐</td>
</tr>
<tr>
<td><code>lay-affix=&quot;clear&quot;</code></td>
<td>内容清除</td>
</tr>
<tr>
<td><code>lay-affix=&quot;自定义图标值&quot;</code></td>
<td>值对应图标类<code>layui-icon-</code>后面的名称（<a href="../icon/index.html#list">#详见图标列表</a>）。<br>可通过「<a href="input.html#affix-event">点缀事件</a>」完成自定义操作</td>
</tr>
</tbody>
</table class="layui-table">
<h3 id="affix-eye" lay-toc="{level: 2}" class="ws-bold">密码显隐</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], done: function(obj){
  obj.render();
}}">
  <textarea>
<div class="layui-form">
  <div class="layui-input-wrap">
    <input type="password" lay-affix="eye" placeholder="请输入" class="layui-input">
  </div>
</div> 
<!-- import layui -->
  </textarea>
</pre>
<h3 id="affix-clear" lay-toc="{level: 2}" class="ws-bold">内容清除</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], done: function(obj){
  obj.render();
}}">
  <textarea>
<div class="layui-form">
  <div class="layui-input-wrap">
    <input type="text" lay-affix="clear" placeholder="请输入" class="layui-input">
  </div>
  <hr class="ws-space-16">
  <div class="layui-input-wrap">
    <input type="text" value="默认有值状态" lay-affix="clear" class="layui-input">
  </div>
  <hr class="ws-space-16">
  <div class="layui-input-wrap">
    <input type="text" value="禁用状态时" lay-affix="clear" disabled class="layui-input">
  </div>
  <hr class="ws-space-16">
  <div class="layui-input-wrap">
    <input type="text" value="只读状态时" lay-affix="clear" readonly class="layui-input">
  </div>
</div>
<!-- import layui -->
  </textarea>
</pre>
<h3 id="affix-custom" lay-toc="{level: 2}" class="ws-bold">自定义动态点缀</h3>
<p>我们还可以对 <code>lay-affix</code> 属性设置任意图标值，从而实现自定义动态点缀功能。</p>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], done: function(obj){
  obj.render();
}}">
  <textarea>
<div class="layui-form">
  <div class="layui-input-wrap">
    <input type="text" lay-affix="location" lay-filter="location" placeholder="位置" class="layui-input">
  </div>
  <hr class="ws-space-16">
  <div class="layui-input-wrap">
    <input type="text" lay-affix="search" lay-filter="search" lay-options="{split: true}" placeholder="搜索…" class="layui-input">
  </div>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var form = layui.form;
  // 输入框点缀事件 - 位置示例
  form.on('input-affix(location)', function(data){
    var elem = data.elem; // 输入框
    // do something
    layer.msg('模拟获取位置中…', {icon: 16, time: 1.5*1000}, function(){
      elem.value = '浙江杭州'; // 向输入框赋值
    })
  });
  // 输入框点缀事件 - 搜索示例
  form.on('input-affix(search)', function(data){
    var elem = data.elem; // 输入框
    var value = elem.value; // 输入框的值
    if(!value){
      layer.msg('请输入搜索内容');
      return elem.focus()
    };
    // 模拟搜索跳转
    location.href = '?keywords='+ value + '&_'+ new Date().getTime() +'#affix-custom';
  });
});
</script> 
  </textarea>
</pre>
<p>输入框的自定义动态点缀功能，让原本单一的输入框有了更多的想象空间。</p>
<h3 id="on" lay-toc="{level: 2}" class="ws-bold">点缀事件</h3>
<p><code>form.on('input-affix(filter)', callback);</code></p>
<ul>
<li><code>input-affix</code> 为输入框动态点缀事件固定名称</li>
<li><code>filter</code> 为输入框对应的 <code>lay-filter</code> 属性值</li>
</ul>
<p>该事件在点击输入框的点缀图标时触发，通过该事件可以完成一些自定义操作。</p>
<pre><code class="layui-code">form.on('input-affix(filter)', function(data){
  var elem = data.elem; // 获取输入框 DOM 对象
  var affix = data.affix; // 获取输入框 lay-affix 属性值
});
</code></pre>

    </div>
    <div class="ws-text-tools">
      
      <a href="https://github.com/layui/layui/edit/2.x/docs/form/input.md" rel="nofollow" target="_blank" title="在 Github 上编辑此文档">
        <i class="layui-icon layui-icon-edit"></i>
      </a>
      
    </div>
  </div>
</div>
<div class="ws-menu-bar layui-bg-green layui-hide">
  <i class="layui-icon layui-icon-spread-left"></i>
</div>
  
<div class="layui-footer ws-footer">
  <p>
    Copyright &copy; 2023 <a href="../../../index.html">Layui</a> MIT Licensed</p>
  <p id="LAY-footer-info">
    <a href="https://gitee.com/layui/layui/blob/main/DISCLAIMER.md" rel="nofollow" target="_blank">免责声明</a> 
    <a href="https://github.com/layui/layui/blob/main/LICENSE" rel="nofollow" target="_blank">开源协议</a>
    <a href="https://gitee.com/layui/" target="_blank">开源生态</a>
    <a href="https://codepen.io/layui/pen/bGxZXrd" rel="nofollow" target="_blank">在线测试</a>
    <a href="https://gitee.com/layui/layui/issues" rel="nofollow" target="_blank">社区交流</a>
  </p>
  <p>
    <span>
      鸣谢：
      <a href="https://www.upyun.com/?invite=SJ0wu6g2-&referer=layui" target="_blank" sponsor="upyun" style="color: #23A7E8;">
        <strong>又拍云</strong>
      </a>
      <a href="https://gitee.com/?referer=layui" target="_blank" sponsor="Gitee" style="color:#C71D23;">
        <strong>Gitee</strong>
      </a>
      <a href="https://www.iconfont.cn/?referer=layui" target="_blank" sponsor="Gitee" style="color: #9B16FF;">
        <strong>iconfont</strong>
      </a>
    </span>
  </p>
</div>
<div class="ws-shade"></div>
 
<script src="/public/layui/v/2.8.6/layui.js"></script>
<script>
layui.config({
  base: '//res.sentcss.com/static/dist/docs/2.8/modules/',
  version: '16',
  res: '//res.sentcss.com/static/dist/docs/',
  curl: ''
}).use('global',function(w){w.a||w.r&&w.r()});
</script>
 
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?363b2abe8678eec8a6850500ea63a63b";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>